// 纹理和贴图
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'

function App() {

    useEffect(() => {

        // 创建场景
        const scene = new THREE.Scene()

        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.1,//相机的近截面
            1000//相机的远截面
        )

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中
        let gui = new GUI()

        // 创建纹理加载器
        const textureLoader = new THREE.TextureLoader()
        // 加载纹理
        const texture = textureLoader.load('./textures/t1.jpg')
        // 加载ao贴图 （环境光贴图）
        // const aoTexture = textureLoader.load('./textures/ao.jpg')

        // 加载透明度贴图
        // const alphaTexture = textureLoader.load('./textures/alpha.jpg')

        // 加载光照贴图
        // const lightTexture = textureLoader.load('./textures/light.jpg')

        // 设置环境贴图
        // const envTexture = textureLoader.load('./textures/env.jpg')

        // 加载hdr环境贴图
        const hdrLoader = new RGBELoader()
        // hdrLoader.load('./textures/env.hdr', function(texture) {
        //     设置球形映射
        //     texture.mapping = THREE.EquirectangularReflectionMapping
        //     scene.environment = texture
        //     scene.background = texture
        // })

        // 创建几何体
        let planeGeometry = new THREE.PlaneGeometry(1, 1)
        let planeMaterial = new THREE.MeshBasicMaterial({
            // 白色
            color: 0xffffff,
            map: texture,
            // 允许透明
            transparent: true,
            // // 设置ao贴图
            // aoMap:aoTexture,
            // // 环境光贴图的影响范围
            // aoMapIntensity:1

            // 设置透明度贴图
            // alphaMap:alphaTexture,

            // 设置光照贴图
            // lightMap:lightTexture,
            // 光照贴图的影响范围
            // lightMapIntensity:1,
            // 设置环境贴图
            // envMap:envTexture,
            // 环境贴图的影响范围
            // envMapIntensity:1,
        })
        let plane = new THREE.Mesh(planeGeometry, planeMaterial)
        scene.add(plane)

        // 设置相机位置
        camera.position.z = 5
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        // 阻尼
        controls.enableDamping = true
        // 旋转
        controls.enableRotate = true
        // 缩放
        controls.enableZoom = true
        // 设置阻尼系数
        controls.dampingFactor = 0.05
        // 渲染
        renderer.render(scene, camera)

        // 渲染函数
        function animate() {
            requestAnimationFrame(animate)
            // 更新轨道控制器
            controls.update()
            renderer.render(scene, camera)
        }
        // 调用渲染函数
        animate()

        // 监听窗口变化
        window.addEventListener('resize', () => {
            // 更新相机
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            // 更新渲染器
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })
    }, [])
    return (
        <>
        </>
    )
}

export default App
